<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
	省份：
	<select id="province" onchange="selectCitys(this)">
		<option>--请选择--</option>
		<option value="001">山东省</option>
		<option>江苏省</option>
		<option>浙江省</option>
	</select>
	
	城市：
	<select id="city" onchange="selectAreas(this)">
		<option>--请选择--</option>
		<option>济南市</option>
		<option>威海市</option>
		<option>烟台市</option>
	</select>
	县区：
	<select id="area">
		<option>--请选择--</option>
		<option>市北区</option>
		<option>市南区</option>
		<option>开发区</option>
	</select>
	
	<script src="${pageContext.request.contextPath}/lib/jquery/jquery-1.11.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		$(function(){
			$.post(
				"${pageContext.request.contextPath}/selectArea?method=selectProvince",
				function(data){
					console.log(data);
					var html = "<option>--请选择--</option>";
					for(var i = 0;i < data.length;i++){
						html+="<option value='"+ data[i].id+"'>"+data[i].province+"</option>"
					}
					$("#province").html(html);
				},
				"json"
			);
		});
		
		/* 市 */
		function selectCitys(obj){
			//清除县区的内容
			$("#area option:gt(0)").remove();
			var provinceId = $(obj).val();
			$.post(
					"${pageContext.request.contextPath}/selectArea?method=selectCity",
					{"provinceId" : provinceId},		
					function(data){
						console.log(data);
						var html = "<option>--请选择--</option>";
						for(var i = 0;i < data.length;i++){
							html+="<option value='"+ data[i].id+"'>"+data[i].city+"</option>"
						}
						$("#city").html(html);
					},
					"json"
				);
		}
		
		//县区
		function selectAreas(obj){
			//清除县区的内容
			var cityId = $(obj).val();
			$.post(
					"${pageContext.request.contextPath}/selectArea?method=selectArea",
					{"cityId" : cityId},		
					function(data){
						console.log(data);
						var html = "<option>--请选择--</option>";
						for(var i = 0;i < data.length;i++){
							html+="<option value='"+ data[i].id+"'>"+data[i].area+"</option>"
						}
						$("#area").html(html);
					},
					"json"
				);
		}
		
	</script>
</body>
</html>